<template>
  <div class="table" id="table">
    <div class="table-container">
      <div class="table-responsive table-context">
        <div id="sample-table-2_wrapper" class="dataTables_wrapper" ref="tableWrap">
          <div style="overflow:auto;border-right:1px solid #ddd" >
            <div id="table_title" style="overflow:hidden" >
              <table id="sample-table-2 " :style="{width:tableSetting.width}" class="table table-striped table-bordered table-hover dataTable table-title no-border-left">
                <thead>
                  <tr role="row" style="border-bottom:0px">
                    <th class="center sorting_disabled no-border-left" v-for="col in tableSetting.columns" :style="{width:col.width}">
                      <label v-if="col.isChecked">
                        <input type="checkbox" class="ace">
                        <span class="lbl" style="display: inline;"></span>
                      </label>
                      <div v-else-if="col.isOperater">操作</div>
                      <div v-else>{{col.title}}</div>
                    </th>
                  </tr>
                </thead>
              </table>
            </div>
            <div id="table_body" style="height:300px;" @scroll="tableScroll">
              <div style="height:300px;overflow-y:auto;" :style="{width:tableSetting.width}">  
              <table id="sample-table-2" :style="{width:tableSetting.width}" class="table table-striped table-bordered table-hover dataTable no-border-left">
                <tbody role="alert" aria-live="polite" aria-relevant="all">
                  <tr class="odd" v-for="d in list">
                    <td class="center  sorting_1 no-border-left" v-for="col in tableSetting.columns" :style="{width:col.width}">
                      <label v-if="col.isChecked">
                        <input type="checkbox" class="ace">
                        <span class="lbl" style="display: inline;"></span>
                      </label>
                      <div v-else-if="col.isOperater" class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                        <a :class="op.opClass" href="#" v-for="op in col.ops" @click="tabBtnClick(op.callBack,d)">
                          <i :class="[op.opIcon]" class="bigger-130"></i>
                        </a>
                      </div>
                      <div v-else>
                        {{d[col.prop]}}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>
            </div>
          </div>
          <div class="row table-page"   :style="{width:pageWidth}" v-show="showPage">
            <div class="col-sm-6">
              <div class="dataTables_info" id="sample-table-2_info" style="float: left;">
                <label>每页
                  <select size="1" name="sample-table-2_length" @change="pageSizeChange" v-model="pageSize">
                    <option value="10" selected="selected">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </select>记录，</label>第1页,共有23页
              </div> 
            </div>

            <div class="col-sm-6">
              <div class="dataTables_paginate paging_bootstrap">
                <ul class="pagination">
                  <li class="prev disabled">
                    <a href="#">
                      <i class="icon-double-angle-left"></i>
                    </a>
                  </li>
                  <li class="active">
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li class="next">
                    <a href="#">
                      <i class="icon-double-angle-right"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "Table",
    //   props: ["columns", "url"],
    data() {
        return {
            msg: "Welcome to Your Vue.js App",
            showPage: true,
            pageSize:10,
            pageWidth: '100%',
            params:{},
            tableSetting: {
                columns: [
                    {
                        isChecked: true,
                        width: "50px"
                    },
                    {
                        title: "用户编号",
                        prop: "userCode",
                        width: "30%"
                    },
                    {
                        title: "用户名称",
                        prop: "userName",
                        width: "30%"
                    },
                    {
                        isOperater: true,
                        width: "20%",
                        ops: [
                            {
                                opClass: "green",
                                opIcon: "icon-pencil",
                                callBack:"editUser"
                            }
                        ]
                    }
                ],
                url: "http://localhost:8080",
                load: false,
                width: "450px",
                height: "",
                showPage: true,
                success:false
            },
            list: [
                {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                },
                 {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                },
                 {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                },
                 {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                },
                 {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                },
                 {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                },
                 {
                    userCode: "test01",
                    userName: "测试"
                },
                {
                    userCode: "test01",
                    userName: "测试"
                }
            ]
        };
    },
    methods: {
        //创建数据
        createTab(tableSetting) {
            this.columns = tableSetting.columns
            this.tableSetting = tableSetting
            this.showPage = tableSetting.showPage
            
            let w = this.$refs.tableWrap.clientWidth
            let tw = this.tableSetting.width.replace('px','').replace('%','')
            console.log(w)
            console.log(tw)
            if(tw > w){
                this.pageWidth = '100%'
            }else{
                this.pageWidth = this.tableSetting.width
            }
        },
        loadData(p){
          setQueryParams(p)
          reloadData()
        },
        setQueryParams(p){
          this.params = p
        },
        //加载数据
        reloadData() {
            this.$http
                .post(this.tableSetting.url, this.params)
                .then(function(resp) {
                    //处理返回的数据
                    if(this.tableSetting.success){
                        success("success",resp);
                    }
                });
        },
        //获取选择数据
        tGetSelect(){
            
        },
        //获取所有的数据
        tGetSelectAll(){
            return this.list;
        },
        //清除表格数据
        tClear(){
            this.list = []
        },
        //页面点击
        pageClick(page){
          this.params.curPage = page
          reloadData()
        },
        pageSizeChange(){
            this.params.pageSize = this.pageSize
            reloadData()
        },
        //表格按钮
        tabBtnClick(event,data){
          this.$emit(event,data);
        },
        //加载成功后自动回调方法
        success(event,data){
            this.$emit(event,data);
        },
        tableScroll(){
            var tableBody = document.getElementById("table_body")
            var tableTitle = document.getElementById("table_title")
            tableTitle.scrollLeft = tableBody.scrollLeft
        }
    },
    template: "#footer"
};
</script>

<style>
table{
    table-layout: fixed;
}
.table-title thead > tr > th {
    border-bottom: 0px;
}
.table-container {
    margin: auto;
}
.no-border-bottom {
    border-bottom: 0px;
}
.no-border-left {
    /* border-left: 0px !important; */
}
.table-context {
    /* border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc; */
}
.table-page{
  height:55px;
  line-height: 55px;
  margin:auto;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
    padding: 0px;
    height: 30px;
    line-height: 30px;
}
</style>
